<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>诗瑶博客主页</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入当前页面样式 -->
    <link rel="stylesheet" href="./css/detail.css">
</head>
<body>
    <!-- 头部 -->
    <div class="topbar">
        <div class="container">
         <div class="top-img">
            <img src="./image/topImg.jpg">
            <p class="top-head">瑶瑶日记</p>
         </div>
         <div class="top-content">
            <br>
            <p>瑶瑶,</p><br>
            <p>可爱的瑶瑶,</p><br>
            <p>可可爱爱的小诗瑶,</p><br>
            <p>-章爸爸和周妈妈</p>
         </div>
        </div>
    </div>
    <!-- 主导航栏 -->
    <div class="main-nav">
        <div class="container">
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="#contentAll">诗瑶日记</a></li>
            <li><a href="vedio.html">关于瑶瑶</a></li>
            <li><a href="#contact">联系我们</a></li>
            <li><a href="#">留言板</a></li>
        </ul>
        </div>
    </div>
     <!-- 主页图片 -->
    <div class="main-img-content">
        <!-- 创建外部展示容器 -->
        <div class="container">
            <!-- 创建图片储存容器 -->
            <div class="main-img">
                <img src="./image/shiyaoheng.jpg" alt="">
                <img src="./image/shiyao1.jpg" alt="">
                <img src="./image/shiyao555.jpg" alt="">
            </div>
             <!--设置圆点 -->
            <div class="yuandian">
                <div class="dian1 dian"></div>
                <div class="dian2 dian"></div>
                <div class="dian3 dian"></div>
            </div>
        </div>
   </div>
     <!-- 内容区 -->
     <div class="main-content">
        <div id="contentAll" class="container">
            <!-- 左边内容区 -->
          <div class="content-left">
             <img class="title-img" src="./image/4.jpg">
             <img class="title-img" src="./image/44.jpg">    
             <div class="content-title">《特效瑶瑶》</div>
             <div class="content-autho">章海平&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发布时间&nbsp;:&nbsp;&nbsp;2024-08-08</div>
             <div class="content-text">瑶瑶,小瑶瑶,可可爱爱的小诗瑶,特效版瑶瑶,今天的瑶瑶很特效</div>
                <div class="content-img">
                    <img src="./image/4444.jpg">
                    <img src="./image/444.jpg">
                    <img src="./image/44444.jpg">      
                 </div>
          </div>
            <!-- 右边站内搜索 -->
         <div class="content-nav-search">
             <p class="content-p">&nbsp;站内搜索</p>
             <input type="search" class="input-field" placeholder="搜索瑶瑶...">
             <button class="input-button">Seach</button>
         </div>
         <!-- 右边热门推荐 -->
         <div class="content-nav-hot">
            <p class="content-p">&nbsp;热门推荐</p>
            <ul>
                <li><a href="detail-six.html">《小瑶瑶YYDS》</a></li>
                <li><a href="detail-five.html">《拽拽的瑶瑶》</a></li>
                <li><a href="detail-four.html">《特效瑶瑶》</a></li>
                <li><a href="detail-three.html">《瑶瑶穿新衣》</a></li>
                <li><a href="detail-one.html">《酷酷瑶瑶》</a></li>
            </ul>
        </div>
        </div>
     </div>
    <!-- 页尾 -->
    <div class="mian-end">
        <div class="container">
            <div class="container-end">瑶瑶日记</div>
            <div class="container-end-two">由章爸爸周妈妈提供技术数据支持</div>
            <div class="container-end-three">@2024-2024 zhanghaiping.com yaoyao logs</div>
        </div>
    </div>
</body>
</html>